<template>
  <div id="app">

    <!-- <HelloBing></HelloBing>
    <HelloEvent></HelloEvent> 
    <HelloStyle></HelloStyle>
    <HelloCondition></HelloCondition> 
    <HelloFor></HelloFor> 
    <HelloInput></HelloInput>
    <HelloDirective> </HelloDirective>  
    <HelloLife></HelloLife> -->
    <!-- 父子组件给组件间传递数据 -->
    <!-- <HelloProp name="张三" age=18 post-title="CEO" :address="address" :getStudentMessag="getStudentMessag">
    </HelloProp> -->

    <!-- 混入mixin 可以将多个组件公共配置提取出来，然后进行复用 -->
    <!-- <HelloMixin></HelloMixin> -->

    <!-- <HelloPlugin></HelloPlugin> -->

    <HelloTodo></HelloTodo>


  </div>
</template>

<!-- App.vue（根组件） -->

<script>

import HelloBing from './components/HelloBing.vue'
import HelloEvent from './components/HelloEvent.vue'
import HelloStyle from './components/HelloStyle.vue'
import HelloCondition from './components/HelloCondition'
import HelloFor from './components/HelloFor'
import HelloInput from './components/HelloInput'
import HelloDirective from './components/HelloDirective'
import HelloLife from './components/HelloLife'
import HelloProp from './components/HelloProp'
import HelloMixin from './components/HelloMixin'
import HelloPlugin from './components/HelloPlugin'
import HelloTodo from './components/HelloTodo'






export default {
  name: 'App',
  components: {
    HelloBing,
    HelloEvent,
    HelloCondition,
    HelloFor,
    HelloInput,
    HelloDirective,
    HelloLife,
    HelloProp,
    HelloMixin,
    HelloPlugin,
    HelloTodo,
    HelloStyle
  },
  data() {
    return {
      address: ['北京', '上海']
    }
  },
  methods: {
    getStudentMessag(name, age) {
      console.log("我是APP组件");
      console.log("父组件收到了student的名字", name);
      console.log("父组件收到了student的年龄", age);
    }
  }









}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
